<!--/**
*编辑个人资料 *
*
* @author LWG
* @date 2022/7/19 15:12
* @since 1.0.0
*/-->
<template>
  <div>
    <div class="top">
      <!-- 顶部导航栏 -->
      <van-nav-bar
          left-arrow
          fixed
          title="编辑个人资料"
          @click-left="onClickLeft"
      ></van-nav-bar>
      <!-- 顶部背景图片 -->
      <div class="bgImg"></div>
      <van-form @submit="onSubmit" class="from">
        <van-field
            v-model="nickname"
            name="nick"
            label="昵称"
            placeholder="昵称"
            :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field
            v-model="address"
            type="address"
            name="address"
            label="地址"
            placeholder="地址"
            :rules="[{ required: true, message: '请填写地址' }]"
        />
        <van-field
            v-model="School"
            type="School"
            name="School"
            label="学校"
            placeholder="学校"
            :rules="[{ required: true, message: '填写学校' }]"
        />
        <van-field
            v-model="sex"
            type="sex"
            name="sex"
            label="性别"
            placeholder="性别"
        />
        <van-field
            v-model="age"
            type="age"
            name="age"
            label="年龄"
            placeholder="年龄"
            :rules="[{ required: false, message: '请输入年龄' }]"
        />
        <van-field
            type="birthday"
            name="birthday"
            :value="birthday"
            @click="show = true"
            label="生日"
            placeholder="生日"
            :rules="[{ required: false, message: '请输入生日' }]"
        />

        <!--        <van-cell title="生日" " />-->
        <van-datetime-picker
            v-if="show == true"
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirm"
        />

        <van-field
            v-model="introduction"
            type="introduction"
            name="introduction"
            label="个性签名"
            placeholder="个性签名"
        />
        <van-row gutter="24" style="margin-top: 30px">
          <van-col span="8"></van-col>
          <van-col span="8">
            <van-button
                round
                block
                plain
                hairline
                color="black"
                size="small"
                @click="save"
            >保存</van-button>
          </van-col>
          <van-col span="8"></van-col>
        </van-row>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {mapState} from "vuex";
export default {
  name: "Registry0",
  data() {
    return {
      address: "",
      School: "",
      sex: "",
      age: "",
      introduction: "",
      nickname: "",
      birthday: "",
      show: false,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2030, 10, 1),
      currentDate: new Date(2021, 0, 17),
    };
  },
  computed: {
    ...mapState(['userinfo'])
  },
  created() {
    //拿数据
    const url='http://localhost:10002/ums/userDetail/'
    this.axios.get(url+this.userinfo.id).then(response =>{
      if(response.data.state==200){
        console.log("请求成功",response.data.data)
        this.nickname = response.data.data.nickname
        this.introduction = response.data.data.introduction
        this.address = "云南省昆明市盘龙区"
        this.age = 18
        this.sex = '女'
        this.School = "昆明理工大学"
      }else{
        console.log("请求失败")
      }
    })
  },
  methods: {
    //修改属性
    save(){
      const url = 'http://localhost:10002/ums/userDetail/updateUserDetail'
      const dat ={
        address: this.address,
        gender: 1,
        introduction: this.introduction,
        profession: '保护森林，熊熊有责',
        nickname: this.nickname,
        school: this.School,
        userId: this.userinfo.id,
        birthday: this.birthday
      }
      this.axios.post(url,dat).then(response =>{
        if(response.data.state==200){
          console.log("修改成功",response.data.data)
          this.$router.push("/homeview/my/mypage")
        }else{
          console.log("修改失败",response.data.data)
        }
      })

    },
    onClickLeft() {
      Toast("返回");
      history.go(-1);
    },
    formatDate(birthday) {
      return `${birthday.getMonth() + 1}/${birthday.getDate()}`;
    },
    onConfirm(birthday) {
      this.show = false;
      this.birthday = this.formatDate(birthday);
    },
  },
};
</script>

<style scoped>
/* 去除导航栏底边白边 */
.van-hairline--bottom::after {
  border-bottom-width: 0px;
}

/* 背景图片 */
.bgImg {
  width: 100vw;
  height: 30vh;
  z-index: 1;
  background-image: url("https://img01.yzcdn.cn/vant/cat.jpeg");
  background-size: 100%;
}

/* 表单样式 */
.from {
  margin: 5px 14px;
}
</style>
